<template>
  <div class="w-full h-[95px] bg-[#1b1b1b] justify-between flex items-center px-[50px]">
    <div class="flex items-center">
      <img src="@/assets/images/logo_label.png" class="w-[145px] h-[25px]" />
      <!-- <div class="text-[#E6E6E6] text-[25px] ml-[34px]">ICPMS Online</div> -->
      <div class="text-[#E6E6E6] text-[25px] ml-[34px]">QC智慧中台</div>
      <div class="text-white text-[25px] ml-[50px]">{{ storeTitle.getCurrentBatchName }}</div>
    </div>
    <div class="flex items-center gap-x-[30px]">
      <div class="bg-[#3C3C3C] w-[230px] h-[33px] flex items-center px-[10px] py-[4px]">
        <input placeholder="搜索" class="bg-transparent w-full outline-none text-white" />
        <div class="w-[1px] h-full bg-[#888]"></div>
        <SearchOutlined class="text-[#888] text-[20px] ml-[10px] flex-shrink-0" />
      </div>
      <a-popover trigger="click" @openChange="openChange">
        <template #title>
          <div class="flex justify-between px-[10px]">
            <div class="text-[16px] text-white">通知</div>
            <div
              v-if="wsMsg.notices.length > 0"
              class="text-[16px] text-[#53DCFF] cursor-pointer"
              @click="
                () => {
                  wsMsg.notices.forEach(item => (item.isRead = true));
                  wsMsg.notices = wsMsg.notices.filter(item => item.isRead);
                }
              "
            >
              全部已读
            </div>
          </div>
        </template>
        <template #content>
          <div class="max-h-[524px] w-[373px] overflow-y-auto border-t-[1px] border-[#000000]">
            <div
              v-for="item of wsMsg.notices"
              :key="item.time"
              class="flex items-center gap-[20px] cursor-pointer mt-[10px]"
              @click="() => (item.isRead = true)"
            >
              <img v-if="item.isRead" src="@/assets/images/read_msg.png" class="w-[35px] h-[35px] object-cover" />
              <img v-else src="@/assets/images/unread_msg.png" class="w-[35px] h-[35px] object-cover" />
              <div class="flex-grow text-white">
                <p>{{ item.msg }}</p>
                <p>{{ dayjs(item.time * 1000).format('YYYY-MM-DD HH:mm') }}</p>
              </div>
            </div>
          </div>
        </template>

        <a-badge :count="wsMsg.notices.length">
          <img src="@/assets/images/message.png" class="w-[24px] h-[24px] object-cover cursor-pointer" />
        </a-badge>
      </a-popover>
      <img src="@/assets/images/help.png" class="w-[30px] h-[30px] object-cover cursor-pointer" />
      <!-- <img src="@/assets/images/header.png" class="w-[38px] h-[39px] object-cover cursor-pointer" /> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { iRouteInfo } from '@/interface/iRouteInfo';
import { useTitle } from '@/store/title';
import { RouteRecordRaw } from 'vue-router';
import { SearchOutlined } from '@ant-design/icons-vue';
import { useSocketMsg } from '@/store/socket_msg';
import dayjs from 'dayjs';
const wsMsg = useSocketMsg();
// const router = useRouter();
const storeTitle = useTitle();
// 同步最新的菜单

const syncRouteInfo = (route: RouteRecordRaw[], cRoute: iRouteInfo[]): iRouteInfo[] => {
  for (let index = 0; index < route.length; index++) {
    const element = route[index];
    const find = cRoute.find(c => c.path === element.path);
    if (find) continue;
    const info: iRouteInfo = {
      name: element.name || '',
      path: element.path,
      meta: element.meta as any,
    };
    cRoute.push(info);
    if (element.children) {
      const syncRoute = syncRouteInfo(element.children, []);
      cRoute.push(...syncRoute);
    }
  }
  return cRoute;
};
const openChange = (e: any) => {
  if (!e) {
    wsMsg.notices = wsMsg.notices.filter((item: { type: number; msg: string; time: number; isRead: boolean }) => {
      return !item.isRead;
    });
  }
};
// const jumpWarning = () => {
//   router.push({
//     name: 'alarm_center_records_datas',
//   });
// };
</script>
<style lang="scss" scoped></style>
